<template>
  <div style="padding: 0px 15px;" class="overflowY">
    <div class="searchGroup_list" style="padding: 0px 0px 10px 0px;margin: 0px 0px 0px 0px;">
      <el-row :gutter="20">
        <el-col :sm="6" :xl="4">
          <div class="searchBoxList">
            <el-row>
              <el-col :span="8">
                <span class="searchListName">业务标题: </span>
              </el-col>
              <el-col :span="14">
                <el-input size="small" v-model="queryCondition.busiTitle" placeholder="请输入业务标题" :clearable="true"></el-input>
              </el-col>
            </el-row>
          </div>
        </el-col>
        <el-col :sm="6" :xl="4">
          <div class="searchBoxList">
            <el-row>
              <el-col :span="6">
                <span class="searchListName">申请人: </span>
              </el-col>
              <el-col :span="14">
                <el-input size="small" v-model="queryCondition.busiUserName" placeholder="请输入申请人" :clearable="true"></el-input>
              </el-col>
            </el-row>
          </div>
        </el-col>
        <el-col :sm="6" :xl="4">
          <div class="searchBoxList">
            <el-row>
              <el-col :span="8">
                <span class="searchListName">环节名称: </span>
              </el-col>
              <el-col :span="14">
                <el-input size="small" v-model="queryCondition.activityName" placeholder="请输入环节名称" :clearable="true"></el-input>
              </el-col>
            </el-row>
          </div>
        </el-col>
        <el-col :sm="6" :xl="4">
          <div class="searchBoxList">
            <el-row>
              <el-col :span="6">
                <span class="searchListName">审核人: </span>
              </el-col>
              <el-col :span="16">
                <el-input size="small" v-model="queryCondition.auditUserName" placeholder="请输入审核人" :clearable="true"></el-input>
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col>
          <div style="display: inline-block;text-align: left;width: 100%;padding-top: 11px;">
            <el-button type="primary" size="mini" class="size" icon="el-icon-search" @click="fetchData">搜索</el-button>
          </div>
        </el-col>
      </el-row>
    </div>

    <div style="position: relative;border: 1px solid #ccc;padding:0px 0px 54px 0px;margin:0px 0px 0px 0px;position: relative;">
      <el-table
        ref="singleTable"
        :data="tableData"
        tooltip-effect="dark"
        @row-contextmenu="rowContextmenu"
        @cell-dblclick="cellClick"
        @row-click="rowClick"
        @sort-change="sortChange"
        @current-change="handleCurrentChange"
        :highlight-current-row="true"
        height="340"
        style="width: 100%">
        <el-table-column
          width="50"
          align="center"
          label="序号">
          <template slot-scope="scope">
            <span>{{scope.$index + (pagingArgs.currentPageNo - 1) * 10 + 1}}</span>
          </template>
        </el-table-column>
        <el-table-column
          width="120"
          prop="busiTypeName"
          align="left"
          sortable="custom"
          :show-overflow-tooltip="true"
          label="业务类型">
        </el-table-column>
        <el-table-column
          width="200"
          prop="busiTitle"
          align="left"
          sortable="custom"
          :show-overflow-tooltip="true"
          label="业务标题">
        </el-table-column>
        <el-table-column
          width="100"
          prop="busiUserName"
          align="left"
          sortable="custom"
          :show-overflow-tooltip="true"
          label="申请人">
        </el-table-column>
        <el-table-column
          width="200"
          prop="activityName"
          align="left"
          sortable="custom"
          :show-overflow-tooltip="true"
          label="环节名称">
        </el-table-column>
        <el-table-column
          width="100"
          prop="auditUserName"
          align="left"
          sortable="custom"
          :show-overflow-tooltip="true"
          label="审核人">
        </el-table-column>
        <el-table-column
          width="150"
          prop="arriveTime"
          align="center"
          sortable="custom"
          :show-overflow-tooltip="true"
          label="到达时间">
        </el-table-column>
        <el-table-column
          width="150"
          prop="completeTime"
          align="center"
          sortable="custom"
          :show-overflow-tooltip="true"
          label="完成时间">
        </el-table-column>
        <el-table-column
          width="100"
          prop="currentStatusName"
          align="center"
          sortable="custom"
          :show-overflow-tooltip="true"
          label="审核状态">
        </el-table-column>
        <el-table-column
          width="260"
          prop="procInstanceId"
          align="center"
          sortable="custom"
          :show-overflow-tooltip="true"
          label="procInstanceId">
        </el-table-column>
        <el-table-column
          width="260"
          prop="activityInsId"
          align="center"
          sortable="custom"
          :show-overflow-tooltip="true"
          label="activityInsId">
        </el-table-column>
        <el-table-column
          width="260"
          prop="workitemInsId"
          align="center"
          sortable="custom"
          :show-overflow-tooltip="true"
          label="workitemInsId">
        </el-table-column>
        <el-table-column
          align="center"
          fixed="right"
          width="60"
          label="操作">
          <template slot-scope="scope">
            <div class="tableBtnBox">
              <el-tooltip class="item" effect="dark" content="查看" placement="top">
                <el-button type="primary" size="mini" @click="toView(scope.row)" icon="el-icon-view" circle></el-button>
              </el-tooltip>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div style="position: absolute;bottom:0;left: 10px;">
        <paging :size-change="pageSizeChange"
                :current-change="pagingQuery"
                :page-sizes="pageSizes"
                :total-num="pagingArgs.totalCount">
        </paging>
      </div>
    </div>
    <el-dialog title="流程实例运行查看" :visible.sync="monitorIsDisplay" width="70%" :close-on-click-modal="false" :destroy-on-close="true"
               v-if="monitorIsDisplay" top="30px" custom-class="myDialog">
      <wf-process-instance-view :workitemInfo="workitemInfo"></wf-process-instance-view>
    </el-dialog>
  </div>
</template>

<script>
  import paging from '@/components/demoAssembly/paging' // 分页
  import { wfProcessInstanceView } from '@/views/workFlowManage/workFlowInstance/components'

  export default {
    name: 'wfProcessHasToDoAll',
    data() {
      return {
        pageSizes: [10, 20, 30, 40],
        // 分页参数
        pagingArgs: {
          currentPageNo: 1,
          totalCount: 0
        },
        tableData: [], // 列表数据
        queryArgs: {
          sort: [
            {
              property: 'arriveTime',
              direction: 'DESC'
            }
          ],
          rowBounds: {
            offset: 0,
            limit: 10
          }
        },
        // 查询参数
        queryCondition: {
          busiTitle: '',
          busiUserName: '',
          activityName: '',
          auditUserName: ''
        },
        workitemInfo: {},
        selectRecord: null,
        monitorIsDisplay: false
      }
    },
    watch: {
      // 普通的watch监听通的watch监听
    },
    computed: {

    },
    filters: {

    },
    components: {
      paging,
      wfProcessInstanceView
    },
    /**
     * 组件创建完成后，查询列表数据
     */
    created() {

    },
    mounted() {
      this.fetchData()
    },
    methods: {
      rowClick() {
        // 行单击事件
      },
      cellClick(row, column, cell, event) {
        // 列单击事件
      },
      rowContextmenu(row, column, e) {
        // 右键菜单
        window.event.returnValue = false
      },
      pageSizeChange(val) {
        this.queryArgs.rowBounds.limit = val
        this.queryArgs.rowBounds.offset = 0
        this.pagingArgs.currentPageNo = 1
        this.fetchData()
      },
      sortChange(col) {
        //
        if (col.prop) {
          let tempDirection = 'ASC'
          if (col.order === 'descending') {
            tempDirection = 'DESC'
          }
          const sort = {
            property: col.prop,
            direction: tempDirection
          }
          this.queryArgs.sort = []
          this.queryArgs.sort.push(sort)
          this.fetchData()
        }
      },
      pagingQuery(val) { // 分页
        this.queryArgs.rowBounds.offset = (val - 1) * 10
        this.pagingArgs.currentPageNo = val
        this.fetchData()
      },
      buildQueryConditions() {
        let tempQueryCondition = []
        for (let key in this.queryCondition) {
          let queryValue = this.queryCondition[key]
          if (queryValue != null && queryValue !== '') {
            let query = {
              property: key,
              value: queryValue,
              type: 'LIKE'
            }
            tempQueryCondition.push(query)
          }
        }
        return tempQueryCondition
      },
      clearQueryConditions() {
        for (let key in this.queryCondition) {
          this.queryCondition[key] = ''
        }
      },
      fetchData() { // 获取内容
        this.queryArgs.condition = this.buildQueryConditions()
        this.$store
          .dispatch('WfProcessHasToDoAll', this.queryArgs)
          .then(res => {
            let records = res.data.records
            if (records) {
              records.forEach((item, index) => {
                // 格式化时间
                item.arriveTime = this.timeFormat(item.arriveTime)
                item.completeTime = this.timeFormat(item.completeTime)
                // let isActiveVersion = item.isActiveVersion
                // if (isActiveVersion === 1) {
                //   item.isActiveVersion = '已激活'
                // } else {
                //   item.isActiveVersion = '未激活'
                // }
              })
            }
            this.tableData = records
            this.pagingArgs.totalCount = res.data.count
            this.selectRecord = null
          })
          .catch(() => {

          })
      },
      handleCurrentChange(currentRow, oldCurrentRow) {
        //
        this.selectRecord = currentRow
      },
      toView(record) {
        this.workitemInfo.busiTypeId = record.busiTypeId
        this.workitemInfo.busiId = record.busiId
        this.workitemInfo.workitemInsId = record.workitemInsId
        this.workitemInfo.procInstanceId = record.procInstanceId
        this.workitemInfo.activityInsId = record.activityInsId
        this.workitemInfo.processId = record.processId
        this.workitemInfo.processVer = record.processVer
        this.workitemInfo.activityId = record.activityId
        this.monitorIsDisplay = true
      },
      timeFormat(time) {
        let tempDate = time
        try {
          if (time && time.length > 8) {
            tempDate = time.substring(0, 4) + '-' + time.substring(4, 6) + '-' + time.substring(6, 8)
            tempDate += ' ' + time.substring(8, 10) + ':' + time.substring(10, 12) + ':' + time.substring(12, 14)
          }
        } catch (e) {
          //
          console.info(e)
        }
        return tempDate
      }
    }
  }
</script>
<style scoped>
  .tree-title{
    font-size: 16px;
    padding:10px 10px 10px 20px;
    border-bottom: 1px solid #ccc;
  }
  .size{
    padding:4px;
  }
  .tree-detail{
    padding: 10px 0 80px 15px;
  }
  .notSize .el-table__empty-text{
    display: none;
  }
  .tableBtnBox >>> .el-button.is-circle{
    padding: 8px !important;
  }

  .searchBoxList{
    margin-top: 10px;
  }
  .searchGroup_list .searchListName{
    font-size: 14px;
    color: #333333;
    display: inline-block;
    vertical-align: middle;
    line-height: 32px;
  }
  .searchGroup_list .searchListNameOther{
    font-size: 14px;
    color: #333333;
    display: inline-block;
    vertical-align: middle;
    line-height: 32px;
    text-align: center;
    padding-left: 20%;
    padding-right: 20%;
  }

</style>
